<template>
  <div class="pageBox">
    <head-component title="商学院" :back="false"></head-component>
    <div class="content">
      <div class="swipeBox">
        <van-swipe :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in 3" :key="index">
            <img class="banner" src="../../image/home/banner.png" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>

      <div class="tabsBox">
        <van-tabs
          v-model:active="active"
          title-inactive-color="#1F0F26"
          title-active-color="#1F0F26"
          line-width="24px"
          @change="change"
        >
          <van-tab title="面部护理"></van-tab>
          <van-tab title="身体护理"></van-tab>
          <van-tab title="健康调理"></van-tab>
        </van-tabs>
      </div>

      <div class="list">
        <div class="listItem flex-between" v-for="(item,index) in 3" :key="index" @click="goDetails">
          <div class="listItemLeft">
            <div>您的线上商城福缘聚优品</div>
            <p>福缘聚优品为您带来最优质全面的服务套餐最</p>
          </div>
          <img class="listItemImg" src="../../image/home/banner.png" alt="" />
        </div>
      </div>
    </div>
    <foot-component tab="2"></foot-component>
  </div>
</template>

<script type="text/ecmascript-6">
import { defineComponent, ref } from "vue";
import headComponent from "../../components/headComponent.vue";
import footComponent from "../../components/footComponent.vue";
import router from "../../router";

export default defineComponent({
  components: {
    headComponent,
    footComponent,
  },
  setup() {
    const active = ref(0);

    function change(name) {
      console.log(name, active.value);
    }

    function goDetails() {
      router.push({
        path: "/businessDetails",
      })
    }

    return {
      active,
      change,
      goDetails,
    };
  },
});
</script>

<style scoped lang="less">
.pageBox {
  width: 100%;
  min-height: 100vh;
  padding-top: 88px;
  padding-bottom: 136px;
  .content {
    padding: 0 30px;
    .swipeBox {
      height: 300px;
      margin-top: 20px;
      :deep(.van-swipe) {
        height: 300px;
      }
      :deep(.van-swipe-item) {
        height: 300px;
      }
      .banner {
        width: 100%;
        height: 300px;
      }
    }
    .tabsBox {
      :deep(.van-tabs__line) {
        background: #e00b12;
      }
    }
    .list {
      .listItem {
        padding: 50px 0;
        border-bottom: 2px solid #ebedf0;
        align-items: flex-start;
        .listItemLeft {
          padding-right: 30px;
          div {
            font-size: 34px;
            font-weight: 500;
            color: #1a1a1a;
          }
          p {
            font-size: 26px;
            font-weight: 400;
            color: #808080;
            margin-top: 24px;
          }
        }
        .listItemImg {
          width: 220px;
          height: 164px;
          border-radius: 8px;
        }
      }
    }
  }
}
</style>